<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/logo.png" alt="">
        </template>
        <template #right>
          <van-icon @click="moveSearchPageFn" name="search" size="0.48rem" color="#fff" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-tabs v-model="channelId" animated sticky offset-top="46">
        <van-tab :name="item.id" v-for="item in channelList" :key="item.id" :title="item.name">
          <ArtcleList :channelId="channelId"></ArtcleList>
        </van-tab>
      </van-tabs>
      <van-icon @click="showPopup" name="plus" size="0.37333334rem" class="moreChannels"/>
    </div>
    <!-- 频道管理端额弹出层 -->
    <van-popup get-container="body" v-model="show">
      <ChannelEdit v-model="channelId" ref="editRef" @closeEV="closeFn" @removeChanneEV="removeChanneFn" @addChannelEV="addChannelFn" :userList="channelList" :unCheckList="unCheckChannelList"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { userChannelAPI, getAllChannelListAPI, updateChannelAPI, removeTheVhannelAPI } from '@/api/index.js'
import ArtcleList from '@/views/Home/components/ArtcleList'
import ChannelEdit from '@/views/Home/ChannelEdit'

export default {
  name: 'Home',
  components: {
    ArtcleList,
    ChannelEdit
  },
  data () {
    return {
      channelId: 0,
      channelList: [],
      show: false,
      allChannelList: []
    }
  },
  methods: {
    showPopup () {
      this.show = true
    },
    async addChannelFn (obj) {
      this.channelList.push(obj)

      // const newArr = this.channelList.filter(obj => obj.id !== 0)
      // const { data: res } = await updateChannelAPI({
      //   channels: newArr.forEach((obj, index) => {
      //     delete obj.name
      //     obj.seq = index
      //   })
      // })
      // console.log(res)

      // 上面的代码出了问题，新增时，名字被删除了
      // 原因：所有数组里的对象，都是同一个内存地址，影响到子组件的数据对象
      // 解决方法
      const newArr = this.channelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 拷贝(浅拷贝)
        delete newObj.name
        newObj.seq = index

        return newObj
      })
      const { data: res } = await updateChannelAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChanneFn (obj) {
      const index = this.channelList.findIndex(obj2 => obj2.id === obj.id)
      this.channelList.splice(index, 1)

      const res = await removeTheVhannelAPI({
        channelId: obj.id
      })
      console.log(res)
      // 删除接口返回状态码204(Not Content) 无返回内容
    },
    closeFn () {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  async created () {
    const { data: res } = await userChannelAPI()
    // console.log(res.data.channels)
    this.channelList = res.data.channels

    // 所有频道列表
    const { data: res1 } = await getAllChannelListAPI()
    this.allChannelList = res1.data.channels
  },
  computed: {
    unCheckChannelList () {
      // const newArr = this.allChannelList.filter(bigObj => {
      //   const index = this.channelList.findIndex(smallObj => {
      //     return smallObj.id === bigObj.id
      //   })

      //   // 如果index > -1，证明找到了
      //   if (index > -1) {
      //     return false
      //   } else {
      //     return true
      //   }
      // })
      // return newArr

      return this.allChannelList.filter(bigObj => this.channelList.findIndex(smallObj => smallObj.id === bigObj.id) === -1)
    }
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
/deep/ .van-tabs__line {
  background-color: #007bff;
}
.main {
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.van-popup {
  width: 100vw;
  height: 100vh;
}
</style>
